import { Button, Drawer, Input, Select, Space, Table } from 'antd'
import ContentWrapper from '../../../component/contentWrapper';
import PageTable from '../../../component/pageTable/pageTable';
import './index.less'
import { useToggle } from 'react-use';
import Form from 'antd/lib/form/Form';
import FormItem from 'antd/lib/form/FormItem';
import IPageInterface from '../../../interface/pageInterface';

interface IWorkOrderManageProps {

}

const WorkOrderManage: React.FC<IWorkOrderManageProps> = (props) => {
    const [visible, setVisible] = useToggle(false);
    return (
        <ContentWrapper gap={16}>
            <Space>
                <span>工单ID：</span>
                <Input placeholder="输入工单ID" />
                <span>工单标题：</span>
                <Input placeholder="输入工单标题" />
                <Button type="primary" >搜索</Button>
                {/* <Button onClick={setVisible} >添加用户</Button> */}
            </Space>
            <PageTable
                columns={[
                    {
                        title: "工单ID",
                        render: () => <div>201112444</div>
                    },
                    {
                        title: "发起人",
                        render: () => <div>张飞</div>
                    },
                    {
                        title: "发起人账号",
                        render: () => <div>13594111111</div>
                    },
                    {
                        title: "工单标题",
                        render: () => <div>温度异常</div>
                    },
                    {
                        title: "状态",
                        render: () => <div>已完成</div>
                    },
                    {
                        title: "发起时间",
                        render: () => <div>2011-11-11</div>
                    },
                    {
                        width: 100,
                        render: () => (
                            <>
                                <Button type="link" size="small" >
                                    查看详情
                                </Button>
                            </>
                        )
                    },

                ]}
                func={async (pageNo, pageSize) => {
                    return { total: 20, data: [1, 2, 3, 4, 5] }
                }}
            />
            <Drawer width={400} title="添加用户" onClose={setVisible} visible={visible}>
                <Form labelCol={{ span: 4 }} wrapperCol={{ offset: 2 }} >
                    <FormItem label="姓名" rules={[{ required: true }]} >
                        <Input placeholder="输入姓名" maxLength={6} />
                    </FormItem>
                    <FormItem label="手机号" rules={[{ required: true }]}>
                        <Input placeholder="输入手机号" maxLength={11} />
                    </FormItem>
                    <FormItem label="密码" rules={[{ required: true }]}>
                        <Input placeholder="输入初始密码" maxLength={16} />
                    </FormItem>
                    <FormItem label="所属公司" >
                        <Select>
                            <Select.Option value="123" >预备</Select.Option>
                        </Select>
                    </FormItem>
                    <FormItem label="状态" >
                        <Select defaultValue="1" >
                            <Select.Option value="1" >正常</Select.Option>
                            <Select.Option value="0" >禁用</Select.Option>
                        </Select>
                    </FormItem>
                    <FormItem>
                        <Button type="primary" style={{ width: "100%" }} >添加</Button>
                    </FormItem>
                </Form>
            </Drawer>
        </ContentWrapper>
    )
}

const WorkOrderManagePage: IPageInterface<IWorkOrderManageProps> = {
    title: "工单管理",
    path: "/order/manage",
    // group: "工单管理",
    component: WorkOrderManage
}

export default WorkOrderManagePage;